<%@ page import="photobox.account.User" %>
<g:render template="../home/header" ></g:render>

<script>
    var ajaxPhoto = function(max,offset){
        if($("#maxId").attr("name")){
            return;
        }
        $("#maxId").attr("name",'request');
        $.ajax({
            type:"POST",
            url:"<g:createLink controller='member' action='browserHistory'/>",
            data:{max:max,offset:offset,json:1},
            dataType:'json',
            beforeSend:function(){
            },
            success:function(data){

                $("#maxId").attr("name","");
                $('#maxId').val(data.max);
                $('#offsetId').val(data.offset);
                var d = data.photoList;
                if(d.length == 0 && data.offset<=8){
                    $("#main").html('<p class="Ptb_100" style="text-align: center;">您还未浏览过任何作品</p>').attr("style","color:red");
                }
                var n = d.length/4;
                var j=0;
                for(var i = 0 ; i < n ; i++){
                    $(".flow").each(function() {
                        if (d[j]) {
                            var r = d[j];
                            var html = [];
                            html.push('<div class="list"><a href="../photo/show/'+ r.id+'">');
                            html.push('<div class="anlipic_tu"><img src="../' + r.smallImagePath + '"  border="0" /></div>');
                            html.push('<div class="anlipic_sm"><h5>' + r.name + '</h5> <p>作者：' +  r.username + '</p><p style="color:#f4972a ">价格:￥'+ r.price+'</p></div>');
                            html.push('</a></div>');
                            html.push('<div class="heng_line clear"></div>');
                            $(this).append(html.join(' '));
                            j++;
                        }else{
                            $("#maxId").attr("name","request");
                        }
                    });
                }
            },
            error: function (data, status, e)//服务器响应失败处理函数
            {
                alert(e);
            }
        });
    };
    $(document).ready(function(){
        //初始化数据
        ajaxPhoto(8,0);
        $(window).scroll(function(){
            // 被卷去的高度
            var scrollTop = document.body.scrollTop||document.documentElement.scrollTop;
            // 页面高度
            var pageHeight = $(document).height();
            // 可视区域高度
            var viewHeight = $(window).height();
            //alert(viewHeight);
            //当滚动到底部时
            if((scrollTop+viewHeight)>(pageHeight-20)){
                ajaxPhoto($('#maxId').val(),$('#offsetId').val());
            }
        });
    });

    $(function(){
        $('#clearHistory').click(function(){
            if(confirm('您确定删除浏览记录吗？')){
                $.ajax({
                    type: "POST",
                    url: "<g:createLink controller="member" action="clearBrowserHistory"/>",
                    dataType: "json",
                    success: function(data) {
                        //alert(data.message);
                        if(data.status != 0){
                            alert("删除成功")
                        }else {
                            alert("没有浏览记录")
                        }
                    },
                    error: function (data, status, e)//服务器响应失败处理函数
                    {
                        alert (e);
                    }
                });
            }
        });

    });
</script>

<!--主体-->
<div class="wid_1200 mTo_20">
    <div class="f_l">
        <div class="left_blk mBo_20 load_blk_ying">
            <div class="user_blk"><g:if test="${session.userId}">
                <div class="user_head"><!--<div class="user_head"><img src="../${user?.photoImage}" alt="头像"></div>-->
                    <g:if test="${photobox.account.User.get(session.userId)?.photoImage}">
                        <img src="../${User.findById(session.userId)?.photoImage}"  alt="头像" />
                    </g:if>
                    <g:else>
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown"><img src="${resource(dir: '/assets/img', file: 'headp_140.jpg')}" alt="photobox" class="userPic"></a>
                    </g:else>
                </div>
            </g:if>
            </div>
            <!--nav-->
            <div class="nav_left bor1" style=" height:108px;">
                <ul class="">
                    <li><g:link controller="member" action="browserHistory" class="current"><span class=" tubiao4 tubiao4_1">&nbsp;</span>我浏览的作品</g:link></li>
                    <li><g:link controller="member" action="purchasedPhoto"><span class=" tubiao4 tubiao4_2">&nbsp;</span>我购买的作品</g:link></li>
                </ul>
            </div>
            <!--/nav-->
        </div>
        <!--/用户简介-->
        <div class="left_blk pBo_20">
            <div class="sJiao"><div class="jiao1"></div></div>
            <div class="user_jianj">
                <p>${User.findById(session.userId)?.presentation}</p>
            </div>
        </div>
        <!--/用户简介-->
        <div class="kong_100 clear"></div>
    </div>

    <!--blk3-->
    <div class="blk3 f_r load1">
        <!--我购买的作品-->
        <div class="s1_title mLe_10">
            <h3 class="f_l" style=" text-indent:0">我浏览的作品</h3>
            <input type="hidden" value="${max}" id="maxId" />
            <input type="hidden" value="${offset}" id="offsetId" />
            <div class="s_btn f_r"><!--<g:link controller="member" action="clearBrowserHistory">清除历史</g:link>--> <a href="#" id="clearHistory">清除历史</a></div>
        </div>

        <!--作品区

        <div id="photoListId" class="anli_pic">
           <g:each in="${photoList}">
                <a href="###">
                    <div class="list">
                        <div class="photoListShow anlipic_tu"><img src="../${it?.originImagePath}"  border="0" width="200" height="200" /></div>
                        <div class="anlipic_sm" >
                            <h5>${it.name}</h5>
                            <p>${it.id}</p>
                        </div>
                    </div>
                </a>
           </g:each>
        </div>
    -->
        <div id="main" class="anli_pic">
            <div class="flow" ></div>
            <div class="flow" ></div>
            <div class="flow" ></div>
            <div class="flow" ></div>
        </div>
    </div>
</div>
<!--/主体-->
<g:render template="../home/footer" ></g:render>




